<template>
  <view class="container">
    <scroll-view class="scroll-content" scroll-y>
      <!-- 轮播图（ -->
      <view class="module-swiper">
        <text class="section-title">泉州风光</text>
        <swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" indicator-dots="true">
          <swiper-item>
            <image style="width: 100%; height: 300rpx;" src="/static/city1.png" mode="aspectFill"></image>
          </swiper-item>
          <swiper-item>
            <image style="width: 100%; height: 300rpx;" src="/static/city2.jpg" mode="aspectFill"></image>
          </swiper-item>
          <swiper-item>
            <image style="width: 100%; height: 300rpx;" src="/static/city3.jpg" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 介绍（ -->
      <view class="module section">
        <text class="section-title">泉州介绍</text>
        <rich-text :nodes="cityIntro" class="intro-content"></rich-text>
      </view>

      <!-- 进度（ -->
      <view class="module section">
        <text class="section-title">探索进度</text>
        <view class="progress-container">
          <text class="progress-text">当前进度: {{ progress }}%</text>
          <progress 
            :percent="progress" 
            show-info 
            stroke-width="6" 
            activeColor="#007AFF"
            backgroundColor="#EEEEEE"
            class="progress-bar"
          ></progress>
        </view>
      </view>

      <!-- 选择 -->
      <view class="module section">
        <text class="section-title">城市选择</text>
        <picker mode="multiSelector" :range="multiArray" :value="multiIndex" @columnchange="onRegionChange" class="picker-container">
          <view class="picker">
            {{ province }} - {{ city }} - {{ district }}
          </view>
        </picker>
      </view>

      <!-- 视频音乐 -->
      <view class="section">
        <text class="section-title">泉州宣传</text>
        <video class="video" :src="videoUrl" controls="true" poster="https://via.placeholder.com/300x200"></video>
        <button class="video-btn" @click="playVideo">播放视频</button>
		
		<button class="video-btn" @click="toggleAudio">
		{{isAudioPlaying ? '暂停音乐' : '播放音乐'}}
		</button>
		</view>


      <!-- 偏好 -->
      <view class="module section">
        <text class="section-title">偏好设置</text>
        <view class="preference-item">
          <text>出行方式：</text>
          <radio-group @change="onTransportChange" class="radio-group">
            <label class="radio-label"><radio value="bus" :checked="transport === 'bus'">公交</radio></label>
            <label class="radio-label"><radio value="drive" :checked="transport === 'drive'">自驾</radio></label>
            <label class="radio-label"><radio value="walk" :checked="transport === 'walk'">步行</radio></label>
          </radio-group>
        </view>
        <view class="preference-item">
          <text>显示推荐景点：</text>
          <switch :checked="showRecommend" @change="onShowRecommendChange" class="switch-btn"></switch>
        </view>
        <view class="preference-item">
          <text>探索半径：{{ radius }}km</text>
          <slider @change="onRadiusChange" :value="radius" min="1" max="20" class="slider-bar"></slider>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cityIntro: `<p style="font-weight: bold; color: #333;">海上丝绸之路起点-泉州</p>
        <p style="color: blue;">这是一座充满魅力的城市</p>
        <p>历史文化:泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期曾被称为"东方第一大港"。</p>
        <p>著名景点:清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。</p>
        <p style="color: #ff0000;">特色文化:拥有南音，木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
        <p>美丽的风景和热情的人民。</p>`,
      multiArray: [
        ['亚洲','欧洲'],
        ['中国','日本'],
        ['北京','上海','广州'],
      ],
      multiIndex: [0, 0, 0],
      province: '亚洲',
      city: '中国',
      district: '北京',
      transport: 'bus',
      showRecommend: true,
      radius: 10,
      progress: 60  ,// 探索进度值
	  
	   videoUrl: "/static/city-video.mp4", // 替换为实际视频地址
	  	  
	  	  audioUrl: "/static/city-music.mp3", // 替换为实际音乐地址
	  	         audioContext: null,
	  	         isAudioPlaying: false,
    };
  },
  methods: {
    onRegionChange: function(e) {
      console.log('修改的列为:' + e.detail.column + '，值为:' + e.detail.value);
      this.multiIndex[e.detail.column] = e.detail.value;
      switch (e.detail.column) {
        case 0: // 拖动第1列
          switch(this.multiIndex[0]) {
            case 0:
              this.multiArray[1] = ['中国','日本'];
              this.multiArray[2] = ['北京','上海','广州'];
              break;
            case 1: 
              this.multiIndex.splice(1, 1, 0);
              this.multiIndex.splice(2, 1, 0);
              break;
          }
          break;
        case 1: 
          switch(this.multiIndex[0]) { 
            case 0:
              switch(this.multiIndex[1]) {
                case 0:
                  this.multiArray[2] = ['北京','上海','广州'];
                  break;
                case 1:
                  break;
              }
              break;
            case 1:
              this.multiIndex.splice(2, 1, 0);
              break;
          }
          break;
      }
      // 更新显示的值
      this.province = this.multiArray[0][this.multiIndex[0]];
      this.city = this.multiArray[1][this.multiIndex[1]];
      this.district = this.multiArray[2][this.multiIndex[2]];
    },
    onTransportChange(e) {
      this.transport = e.detail.value;
    },
    onShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
    },
    onRadiusChange(e) {
      this.radius = e.detail.value;
    }
  }
};
</script>

<style scoped>
/* 容器基础样式 */
.container {
  padding: 20px;
}

.scroll-content {
  height: 100vh;
}

/* 模块通用样式（核心分割样式） */
.module {
  border-radius: 8px;
  padding: 24rpx;
  margin-bottom: 30rpx;
  background-color: #fff;
  border: 1px solid #eee;
}

/* 轮播图模块特殊样式 */
.module-swiper {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin-bottom: 30rpx;
  padding: 24rpx;
}

.swiper {
  width: 100%;
}

/* 模块标题样式 */
.section-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 16rpx;
  display: block;
  color: #333;
}

/* 城市介绍内容样式 */
.intro-content {
  font-size: 28rpx;
  line-height: 1.6;
  color: #666;
}

/* 探索进度条样式 */
.progress-container {
  padding: 10rpx 0;
}

.progress-text {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
  display: block;
}

.progress-bar {
  width: 100%;
  height: 12rpx;
}

/* 城市选择器样式 */
.picker-container {
  width: 100%;
}

.picker {
  padding: 20rpx;
  border-radius: 6rpx;
  background-color: #f8f8f8;
  font-size: 28rpx;
  color: #666;
}

/* 偏好设置样式 */
.preference-item {
  margin-bottom: 24rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
}

.preference-item:last-child {
  margin-bottom: 0;
}

.preference-item text {
  margin-right: 20rpx;
  white-space: nowrap;
}

.radio-group {
  display: flex;
  gap: 24rpx;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.slider-bar {
  flex: 1;
  margin-left: 16rpx;
}
</style>